<template>
    <div class="home-container">
        <!-- 导航 -->
         <van-nav-bar class="app-nav-bar">
             <van-button slot="title"  class="search-btn"  type="info" icon="search" size="small" round to="/search">
                 搜索
             </van-button>
         </van-nav-bar>
        <!-- 导航 -->
        <!-- 文章频道 -->
        <van-tabs v-model="active" class="channel-tab" >
            <van-tab :title="item.name" v-for="item in channels" :key="item.id">
                <!-- 文章内容 -->
                <article-lists :channel="item"></article-lists>
                <!-- 文章内容 -->
            </van-tab>
            <!-- 占位 -->
            <div slot="nav-right"  class="nav-tabs-placeholder"></div>
            <!-- 占位 -->
            <div slot="nav-right"  class="nav-tabs-wrap" @click="isChannelPopupShow = true">
                <van-icon name="wap-nav" />
            </div>
        </van-tabs>
        <!-- 文章频道 -->
        <!-- 弹出层 -->
        <van-popup 
            v-model="isChannelPopupShow" 
            position="bottom" 
            style="height:100%"  
            closeable 
            close-icon-position="top-left" 
            get-container="body" 
        >
            <!-- 弹出层的内容 -->
            <channel-edit  :active="active" :user-channels="channels" @closeChannelPopup=" isChannelPopupShow = false "  @switchChannel=" active = $event "  />
            <!-- 弹出层的内容 -->
        </van-popup>
        <!-- 弹出层 -->
    </div>
</template>

<script>
import { getAllChannels } from '@/api/channel'
import articleLists from './components/article-lists'
import channelEdit from './components/channel-edit'
import storage  from '@/utils/storage'
import { mapState } from 'vuex'

    export default {
        name:'home',
        components:{
            articleLists,
            channelEdit
        },
        data() {
            return {
                active: 0,  //选择频道的下标
                channels: [], //我的频道列表数据
                isChannelPopupShow: false, //频道弹出层的显示状态
            }
        },
        methods: {
            async loadChannelLists(){
                let channels = [];
                // console.log("this.user",this.user);
                if(this.user){
                    // console.log("已登录")
                    // 判断用户是否登录，假如登录，使用线上的频道数据
                   const { data } = await getAllChannels();
                   channels = data.data.channels;
                }else{
                    // console.log("未登录")
                    // 判断用户是否登录，假如未登录，使用本地的频道数据
                    const data = storage.getToken('channel_token');
                    // console.log(data)
                    if(data){
                        // console.log("获取本地的数据")
                        channels = data
                    }else{
                        // console.log("获取线上的数据")
                        const { data } = await getAllChannels();
                        channels = data.data.channels;
                    }
                }
                this.channels = channels
            }
        },
       created() {
           this.loadChannelLists();
       },
       computed:{
           ...mapState(['user'])
       }
    }
</script>

<style lang="less" scoped>
.home-container{
    /deep/ .van-nav-bar__title{
        max-width: none;
    }
    .van-icon{
        font-size: 16px;
    }
    .search-btn{
        width: 277px;
        height: 32px;
        background-color: #5babfb;
        .van-button__text{
            font-size: 14px;
            border: none;
        }
    }

    .nav-tabs-placeholder{
        width: 33px;
        flex-shrink: 0;
    }
    .channel-tab{
        /deep/.van-tab{
            border-right: 1px solid #edeff3;
            border-bottom: 1px solid #edeff3;
        }
        
        /deep/.van-tabs__line{
            bottom: 20px;
            width: 15px !important;
            height: 3px;
            background-color: #3696fa;
        }

    }
    .nav-tabs-wrap{
        position: fixed;
        right: 0;
        height: 40px;
        width: 33px;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: .9;
        .van-icon{
            font-size: 24px;
        }
    }
}
</style>